<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>Measure Distances</title>
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/tundra/tundra.css" />
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1" type="text/javascript"></script>
    <style type="text/css">
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; }
      .zoomprevIcon { background-image:url(images/nav_previous.png); width:16px; height:16px; }
      .zoomnextIcon { background-image:url(images/nav_next.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; }
      .deactivateIcon { background-image:url(images/nav_decline.png); width:16px; height:16px; }
	  .length { background-image:url(images/nav_decline.png); width:16px; height:16px; }
    </style>   
  
  
    <script type="text/javascript">
	
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.dijit.InfoWindow");
        dojo.require("esri.map");
        dojo.require("esri.toolbars.navigation");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.Toolbar");
	  
      var geometryService;
	  var map, navToolbar;
      function init() {
        //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
        //If this null or not available the project and lengths operation will not work.  Otherwise it will do a http post to the proxy.
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
        esri.config.defaults.io.alwaysUseProxy = false;

        //var startExtent = new esri.geometry.Extent(-80.0571,41.3697,-74.4321,44.0822, new esri.SpatialReference({wkid:4326}) );
        //var map = new esri.Map("map", {extent:startExtent});
		
		map = new esri.Map("map");
        var mapURL = "http://gwms.wra.gov.tw/ArcGIS/rest/services/BaseMap/MapServer";
		
        dojo.connect(map, "onLoad", initFunctionality);
		
		map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer(mapURL));
        //map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

        geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        geometryService.lengths(lengthParams);
            //toolbar
        navToolbar = new esri.toolbars.Navigation(map);
        dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
		
      }

      function initFunctionality(map) {
        var tb = new esri.toolbars.Draw(map);

        var lengthParams = new esri.tasks.LengthsParameters();

        //on draw end add graphic, project it, and get new length
        dojo.connect(tb, "onDrawEnd", function(geometry) {
          map.graphics.clear();
    
          lengthParams.polylines = [geometry];
          lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
          lengthParams.geodesic = true;
         
          geometryService.lengths(lengthParams);
          var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
        });

        tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
      }

      function outputDistance(result) {
        dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0] / 1000) + " kilometers";
      }

      function extentHistoryChangeHandler() {
        dojo.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dojo.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }
	  
      dojo.addOnLoad(init);
    </script>

  </head>
  <body>
    Click and hold down on the map to draw a line that will be added to the map.  The application will then use the geometry service to project and compute the length of the line.
    <div id="navToolbar" dojoType="dijit.Toolbar">
		<div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zoom In</div>
		<div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
		<div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();">Full Extent</div>
		<div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
		<div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
        <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div>
        <div dojoType="dijit.form.Button" id="deactivate" iconClass="deactivateIcon" onClick="navToolbar.deactivate()">Deactivate</div>

    </div>
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
         style="width:800px; height:512px; border:1px solid #000;">
		<div id="map" class="claro" style="width:1024px; height:512px; border:1px solid #000;"></div>
		Distance: <span id="distance"></span>
    </div>	
	

  </body>
</html>